/**
* 功能描述：基础容器
* @author jin xiaohang
* @date 2022/9/26 16:48
* @version 1.0
*/
<template>
    <div class="contentBox" :style="contentStyle">
        <div>{{options.title}}</div>
        <div class="content">
            <yw-base-chart :options="options.content"></yw-base-chart>
        </div>
    </div>

</template>

<script>

import YwBaseChart from "../Chart/index.vue";
export default {
    name: "YwBaseContainer",
    components: {YwBaseChart},
    props: {
        options: {
            type: Object,
            default: () => {
                return {}
            }
        },
    },
    computed: {

        contentStyle() {
            let style = ''
            style = { 'width': this.options.width || '100%', 'height': this.options.height || '100%',}
            const gutterLeft = this.options.gutterLeft || 0
            const gutterRight = this.options.gutterRight || 0
            const gutterTop = this.options.gutterTop || 0
            const gutterBottom = this.options.gutterBottom || 0

            if (gutterLeft + gutterRight + gutterTop + gutterBottom > 0) {
                style = Object.assign({}, style, { 'padding': gutterTop + 'px' + ' ' + gutterRight + 'px' + ' ' + gutterBottom + 'px' + ' ' + gutterLeft + 'px' + ' ' }
                )
            }
            return style
        }
    }
}

</script>

<style lang="scss" scoped>
.contentBox {
    align-items: center;
    flex-direction: column;
    display:flex;
    box-sizing: border-box;
    .title{
        height: 40px;
    }
    .content{
        width: 100%;
        justify-content: center;
        display:flex;
        align-items: center;
        height: calc(100% - 40px);
        box-sizing: border-box;
    }

}


</style>
